import { expect, fn, userEvent, within } from "@storybook/test";
import type { Meta, StoryObj } from "@storybook/vue3";
import { Loading as LoadingIcon } from "@element-plus/icons-vue";
import { FlButton } from "flow-toy-ui";

type Story = StoryObj<typeof FlButton> & {
  args: {
    label: string;
  };
};

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta<typeof FlButton> = {
  // 会自动根据/分组
  title: "Component/Button",
  component: FlButton,
  // 自动生成docs
  tags: ["autodocs"],
  // 组件prop
  argTypes: {
    size: {
      description: "尺寸",
      control: { type: "select" },
      options: ["default", "small", "large"],
      type: "string",
      // defaultValue: "default", deprecated
      // name: "尺寸",
      table: {
        defaultValue: {
          summary: "default",
        },
      },
    },
    type: {
      description: "类型",
      type: "string",
      control: { type: "select" },
      options: ["primary", "success", "info", "warning", "danger", "default"],
      table: {
        defaultValue: {
          summary: "default",
        },
      },
    },
    disabled: {
      control: "boolean",
      description: "是否为禁用状态",
      type: "boolean",
    },
    loading: {
      control: "boolean",
      description: "是否为加载状态",
      type: "boolean",
    },
    plain: {
      control: "boolean",
      description: "是否为朴素按钮",
      type: "boolean",
    },
    text: {
      control: "boolean",
      description: "是否为文字按钮",
      type: "boolean",
    },
    link: {
      control: "boolean",
      description: "是否为链接按钮",
      type: "boolean",
    },
    round: {
      control: "boolean",
      description: "是否为圆角按钮",
      type: "boolean",
    },
    circle: {
      control: "boolean",
      description: "是否为圆形按钮",
      type: "boolean",
    },
    nativeType: {
      control: { type: "select" },
      options: ["button", "submit", "reset"],
      type: "string",
      description: "原生button的type属性",
      table: {
        defaultValue: {
          summary: "button",
        },
      },
    },
    throttle: {
      control: "number",
      type: "number",
      description: "节流的时间",
      table: {
        defaultValue: {
          summary: "1000",
        },
      },
    },
  },
  // 所有Story公用的默认arg
  args: {
    type: "default",
    nativeType: "button",
    size: "default",
    throttle: 1000,
    disabled: false,
    loading: false,
    plain: false,
    link: false,
    text: false,
    circle: false,
    round: false,
    loadingIcon: LoadingIcon,
    onClick: fn(),
  },
  // story渲染之后执行的代码 可通过async做一些交互测试
  play: async ({ canvasElement, args, step }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole("button");
    await step("click button", async () => {
      await userEvent.click(button);
    });

    expect(args.onClick).toHaveBeenCalled();
  },
};

export default meta;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  name: "按钮类型", // Story菜单的名称及Docs中Story的title
  // storyName: "override story name", // 无name时 Docs中Story的title
  args: {
    // primary
    type: "primary",
    label: "Primary",
  },
  render: (args: Record<string, any>) => ({
    components: { FlButton },
    setup() {
      return { args };
    },
    template: `<fl-button :data-testid=args.label v-bind="args">{{ args.label }} </fl-button>`, // 加了testid 可使用getByTestId
  }),
};

// 按钮尺寸
export const Large: Story = {
  args: {
    size: "large",
    label: "Large",
  },
  name: "按钮尺寸",
  render: Primary.render,
};

export const Disabled: Story = {
  args: {
    disabled: true,
    label: "Disabled",
  },
  name: "禁用状态",
  render: Primary.render,
};

export const Loading: Story = {
  name: "加载中状态",
  args: {
    loading: true,
    label: "Button",
  },
  render: Primary.render,
};
